<template>
    <el-container>
        <el-main class="nopadding">
            <searchForm :form="form" :list="searchItems()" @onSearch="doSearch" :showBtn="true"></searchForm>
        </el-main>

        <el-header>
            <div class="left-panel">
                <el-button plain type="primary" v-if="auth.add" @click="add">添加</el-button>
            </div>
        </el-header>

        <el-tabs v-model="activeName" @tab-click="handleTabChange" style="width:100%">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="待确认" name="unconfirmed"></el-tab-pane>
            <el-tab-pane label="已确认" name="confirmed"></el-tab-pane>
        </el-tabs>

        <!--表格内容-->
        <el-main class="nopadding">
            <scTable tableCode="tableCode" :pageData="page" :params="form" :pageSize="form.pageSize" :turnPage="paginationChange" @selection-change="selectionChange">
                <!-- 复选框 -->
                <el-table-column type="selection" width="50" fixed></el-table-column>

                <!-- 展开行 -->
                <el-table-column type="expand">
                    <template #default="scope">
                        <el-table :data="scope.row.family" style="margin-left: 50px;">
                            <el-table-column label="姓名" prop="name" width="200" />
                            <el-table-column label="工号" prop="jobNo" width="200" />
                        </el-table>
                    </template>
                </el-table-column>

                <template #enable="scope">
                    <el-switch :disabled="!auth.disableOrEnable" :value="scope.row.enable" @change="disableOrEnable(scope.row.id, scope.row.enable)"></el-switch>
                </template>

                <!-- 右侧固定操作列 -->
                <el-table-column label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="viewById(scope.row.id)">查看</el-button>
                        <el-button type="text" size="small" @click="viewOperationLog(scope.row)">操作记录</el-button>
                    </template>
                </el-table-column>

                <!-- 右侧固定操作列 -->
                <el-table-column label="操作" fixed="right" width="110">
                    <template #default="scope">
                        <el-dropdown @command=" (command) =>{clickDropdown(command, scope.row)}">
                            <span class="el-dropdown-link" style="display: inline-block;margin-right: 10px">
                                操作<el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="view">查看</el-dropdown-item>
                                    <el-dropdown-item command="showLog">操作记录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script setup name="name">
import { onMounted, reactive, ref } from 'vue'
import api from '@/api'
import { tool, hasPermission } from "@/moduleExport";

const auth = {
    add: hasPermission('auth.index.add'), //添加
}
const form = reactive({
    pageNo: 1,
    pageSize: 50,
    no: "",
})
const codeMap = reactive({
    job_level: [],
})

onMounted(() => {
    //加载选项配置-检验依据
    apiSysOptions.codeMap(['job_level']).then(res => {
        codeMap.job_level = res.job_level
    })

    doSearch()
})

//搜索
const page = ref({})
const doSearch = () => {
    api.query(form).then(res => {
        page.value = res
    })
}

//分页点击
const paginationChange = (pageNo) => {
    form.pageNo = pageNo
    doSearch()
}

//添加
const addFormRef = ref(null)
const add = () => {
    addFormRef.value.open()
}

//查看
const viewFormRef = ref(null)
const viewById = (id) => {
    viewFormRef.value.open(id)
}

//删除
const handleDelete = (id) => {
    tool().confirm("确认删除?").then(() => {
        api.delete(id).then(res => {
            tool().notify.success("删除成功")
            doSearch()
        })
    }).catch(() => { })
}

//下载进度导出
const { proxy } = getCurrentInstance()
const exportExcel = () => {
    tool().confirm('确认导出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        tool().notify.info("正在导出")
        api.export(form).then(() => {
            proxy.$bus.emit(proxy.$busKey.openExportProgress)
        })
    }).catch(() => { })
}

//选项维护
const editOptRef = ref(null)
const handleEditOpt = () => {
    editOptRef.value.open('Scrap_information')
}

//tab
const activeName = ref('all')
const handleTabChange = () => {

}

//禁启用
const disableOrEnable = (id, stat) => {
    tool().confirm(!stat ? '是否确认启用?' : '是否确认禁用?', '禁启用提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        api.enabledOrDisable([id], !stat).then(res => {
            tool().notify.success("操作成功")
            doSearch()
        })
    }).catch(() => { })
}

//操作记录
const operationLogRef = ref(null)
const viewOperationLog = (row) => {
    operationLogRef.value.open({ id: row.id, title: '报销单' });
}
const clickDropdown = (command, row) => {
    switch (command) {
        case 'view':
            addFormRef.value.open(row.id, 'view')
            break;
        case 'edit':
            addFormRef.value.open(row.id, 'edit')
            break;
        case 'confirm':
            tool().confirm("是否确认?").then(() => {
                api.confirm(row.id).then(res => {
                    tool().notify.success("确认成功")
                    doSearch()
                })
            }).catch(() => { })
            break;
        case 'delete':
            tool().confirm("确认删除?").then(() => {
                api.delete(row.id).then(res => {
                    tool().notify.success("删除成功")
                    doSearch()
                })
            }).catch(() => { })
            break;
        case 'showLog':
            operationLogRef.value.open({ id: row.id, title: '报销单' });
            break;

        default:
            break;
    }
}

//复选框选择
const selection = ref([])
const selectionChange = (val) => {
    selection.value = val
}

const searchItems = () => {
    return [
        { field: 'no', type: 'input', label: 'label1' },
        { field: 'date', from: 'dateFrom', to: 'dateTo', type: 'daterange', label: 'label2' },
        { field: 'applyDeptIds', type: 'cascader', label: 'label3', select: codeMap.job_level, props: { value: 'optKey', label: 'optValue' } },
        { field: 'jobLevel', type: 'select', label: 'label4', select: codeMap.job_level, key: 'optKey', value: 'optValue' },
        { field: 'workshopList', type: 'checkbox', label: 'label5', list: codeMap.job_level, key: 'optKey', value: 'optValue' },
    ]
}
</script>

<style lang="scss" scoped>
</style>
